import { FC } from 'react';
import { IProps } from './interfaces';
import merge from '../../utils/merge.ts';
import Box from '@mui/joy/Box';

const Toolbar: FC<IProps> = ({ children, ...props }) => {
  const baseToolbarSx = {
    minHeight: {
      xs: 56,
      md: 64,
      sm: 56,
    },
    height: {
      xs: 56,
      md: 64,
      sm: 56,
    },
    maxHeight: {
      xs: 56,
      md: 64,
      sm: 56,
    },
    width: 1,
    display: 'flex',
    flexDirection: 'row',
    justifyContent: 'space-between',
    alignItems: 'center',
  };

  const sxMerge = props.sx ? merge(props.sx, baseToolbarSx) : baseToolbarSx;
  
  return (
    <Box {...props} sx={sxMerge}>
      {children}
    </Box>
  );
};

export default Toolbar;
